<template>
  <div class="dashboard-container" style="margin-top: 20px">
    <el-row>
      <!--echarts-->
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>各岗位人数统计</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <!--echarts的容器-->
            <div id="echarts1" style="height: 420px" ref="echarts1"></div>
          </div>
        </el-card>
      </el-col>

      <!--echarts-->
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>各角色用户统计</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <!--echarts的容器-->
            <div id="echarts2" style="height: 420px" ref="echarts2"></div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {getLineChartData,getPieChartData} from "@/api/echarts/user";

import * as echarts from 'echarts';

export default {
  name: "studentChart",
  data() {
    return {
      echarts1: null,
      echarts2: null,
      echarts1Data: {
        post:[],
        count:[]
      },
      echarts2Data: [],
    };
  },
  created() {  //页面一加载就调用方法获取数据
    this.getEcharts1Data()
    this.getEcharts2Data()
  },
  // 这里初始化echarts只能用 mounted(),不能用created()，用created()会包"Error: Initialize failed: invalid dom."错误
  mounted() {
    this.initChart1()
    this.initChart2()
  },

  methods: {
    // 配置第一个echarts图表
    initChart1(){
      // 初始化echarts
      this.echarts1 =echarts.init(document.getElementById('echarts1'))
      let colors=['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272']  // 自定义线条颜色

      // 定义option
      let option={
        title: {
          text: '各岗位人数统计',
          left: 'center'
        },
        tooltip: {},
        xAxis: {

          // data: ["衬衫", "羊毛衫",  "高跟鞋", "袜子"],
          data: this.echarts1Data.post,
          // 设置x轴字体倾斜
          axisLabel: {
            interval: 0,    //强制文字产生间隔
            rotate: 45,     //文字逆时针旋转45°
            textStyle: {    //文字样式
              color: "black",
              fontSize: 12,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            type: 'bar',
            // data: [5, 20, 36, 10, 10, 20],
            data: this.echarts1Data.count,
            // 自定义线条颜色
            itemStyle:{
              color:params=>colors[params.dataIndex] || '#fac858'
            },
          }
        ]
      }


      // 设置option
      this.echarts1.setOption(option);
    },

    // 配置第二个echarts图表
    initChart2(){
      // 初始化echarts
      this.echarts2 =echarts.init(document.getElementById('echarts2'))
      // 定义option
      let option={
        title: {
          text: '各角色用户统计',
          // subtext: '以计算机学院为例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '用户统计',
            type: 'pie',
            radius: '50%',
            // data: [
            //   { value: 1048, name: '块1' },
            //   { value: 735, name: '块2' },
            //   { value: 580, name: '块3' },
            //   { value: 484, name: '块4' },
            //   { value: 300, name: '块5' }
            // ],
            data: this.echarts2Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      }
      // 设置option
      this.echarts2.setOption(option)
    },

    //获取统计图1的数据
    getEcharts1Data() {
      // 调用后端接口
      getLineChartData().then(res=>{
        this.echarts1Data=res.data
        // console.log(res.data,)
      })
    },

    //获取统计图2的数据
    getEcharts2Data() {
      // 调用后端接口
      getPieChartData().then(res=>{
        this.echarts2Data=res.data
      })
    },

  },
  // 监听echarts数据的变化
  watch:{
    // 监听第一个图标的数据变化
    echarts1Data:{
      handler(){
        this.echarts1.setOption({
          xAxis:{
            data: this.echarts1Data.post,
          },
          series:{
            data: this.echarts1Data.count
          }
        })
      }
    },
    // 监听第二个图标的数据变化
    echarts2Data:{
      handler(){
        this.echarts2.setOption({
          series:{
            data: this.echarts2Data
          }
        })
      }
    }

  }

};
</script>

<style scoped>
.card-box {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 10px;
}
</style>
